<template>
  <div id="login">
    <div class="loginConbox">
      <div class="header">
        <!--                <div class="logo">-->
        <!--                <img src="@/assets/logo.png">-->
        <!--                </div>-->
      </div>
      <div class="loginBox">
        <div class="loginCon">
          <!--        <p class="title">vue-xuadmin权限管理后台模板</p>-->
          <!--        <p class="title">前台: vue + element-ui</p>-->
          <el-card shadow="always" class="login-module" v-if="smdl">
            <div slot="header" class="clearfix formTitlt">
              <span>密码登录</span>
              <span class="titIconbox">
              <i class="iconfont xu-saomadenglu2 fa-lg iconColor"></i>
              <i class="iconfont xu-saomadenglu01 el-icon--right fa-lg pointer" @click="smdl = !smdl"></i>
            </span>
            </div>
            <el-form :model="loginForm" status-icon label-width="100px" class="demo-ruleForm">
              <el-form-item>
                <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入登录账号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input type="password" v-model="loginForm.password" auto-complete="off"
                          placeholder="请输入登录密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="subBtn" type="primary" @click="submitForm">登录</el-button>
              </el-form-item>
              <p class="smalltxt">
                <router-link class="a" to="#">忘记密码</router-link>
                <router-link class="a" to="#">忘记会员名</router-link>
                <router-link class="a" to="#">免费注册</router-link>
              </p>
            </el-form>
          </el-card>

          <el-card shadow="always" class="login-module" v-else>
            <div slot="header" class="clearfix formTitlt">
              <span>扫码登录</span>
              <span class="titIconbox">
              <i class="iconfont xu-mimadenglu1 fa-lg iconColor"></i>
              <i class="iconfont xu-imagevector el-icon--right fa-lg pointer" @click="smdl = !smdl"></i>
            </span>
            </div>
            <div class="ewmbox">
              <div class="ewm">
                <img src="https://img.alicdn.com/tfscom/TB1ivYYyHvpK1RjSZFqwu3XUVXa.png">
              </div>
              <div class="ewmicon">
                <i class="iconfont xu-saomadenglu fa-2x iconColor"></i>
                <p>打开 微信 扫一扫登录</p>
              </div>
              <p class="smalltxt">
                <router-link class="a" to="#">免费注册</router-link>
              </p>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        smdl: true,
        loginForm: {
          username: 'xuqing',
          password: '123456'
        }
      }
    },
    methods: {
      submitForm() {
        let that = this
        if (this.loginForm.username === '' || this.loginForm.password === '') {
          this.$message({
            showClose: true,
            message: '账号或密码不能为空',
            type: 'error'
          })
          return false
        } else {
          console.log("测试   飒飒飒飒")
          this.$http({
            url: this.Host + '/login',
            method: 'POST',
            data: {
              username: this.loginForm.username,
              password: this.loginForm.password
            }
          }).then(result => {
            console.log(result)
            console.log(result.data.message === 'success')
            if (result.data.message === 'success') {
              that.$router.push({path: '/'})
            }
            console.info("sdssd")
          }).catch(error => {
            console.info("ff")
          })
          // this.$http.get(env.API_ROOT + 'login')
          // 将 username 设置为 token 存储在 store，仅为测试效果，实际存储 token 以后台返回为准
          // that.$store.dispatch('setToken', that.loginForm.username).then(() => {
          // that.$router.push({path: '/'})
          // }).catch(res => {
          //   that.$message({
          //     showClose: true,
          //     message: res,
          //     type: 'error'
          //   })
          // })
        }
      },
      message() {
        const h = this.$createElement;
        this.$notify({
          title: '账号密码',
          message: h('i', {style: 'color: teal'}, '账号密码可以随意填写，为了测试效果填写的账号将会被存储为临时假 token'),
          duration: 6000
        });
      },
    },
    mounted() {
      this.message()
    }
  }
</script>
<style lang="scss">
  @import "login";
</style>
